<div class="markdown-editor-container">
  <as-split unit="percent" [direction]="direction" (dragEnd)="dragEnd('percent', $event)" #split="asSplit">
    <as-split-area size="30" #area1="asSplitArea">
      <div class="editor">
        <textarea class="markdown-task-editor"></textarea>
      </div>
    </as-split-area>
    <as-split-area size="70" #area2="asSplitArea">
      <div class="preview">
        <mat-form-field>
          <mat-label>Render Type</mat-label>
          <mat-select [(value)]="displayType" (selectionChange)="changeRenderType($event)">
            <mat-option value="todo">Todo</mat-option>
            <mat-option value="mindmap">Mind Map</mat-option>
            <mat-option value="radar">Radar Chart</mat-option>
            <mat-option value="ddd">Domain Driven Design</mat-option>
          </mat-select>
        </mat-form-field>

        <div *ngIf="displayType === 'todo'">
          <component-markdown-task-render
            [(ngModel)]="tasks"
            (ngModelChange)="updateModel($event)">
          </component-markdown-task-render>
        </div>
        <div *ngIf="displayType === 'mindmap'">
          <component-mind-map
            [(ngModel)]="tasks"
            (ngModelChange)="updateModel($event)">
          </component-mind-map>
        </div>
        <div *ngIf="displayType === 'radar'">
          <component-markdown-radar-chart
            [(ngModel)]="tasks"
            (ngModelChange)="updateModel($event)">
          </component-markdown-radar-chart>
        </div>
        <div *ngIf="displayType === 'ddd'">
          <markdown-domain-design
            [(ngModel)]="tasks"
            (ngModelChange)="updateModel($event)">
          </markdown-domain-design>
        </div>
      </div>
    </as-split-area>
  </as-split>
</div>
